<template>
  <view class="banner top-back-image-container">
    <view class="text-container">{{ contentText }}</view>
    <image :src="imagePath"></image>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: "topBackImageContainer",
  props: {
    imagePath: {
      type: String
    },
    contentText: {
      type: String
    }
  }
}
</script>

<style scoped lang="scss">
.top-back-image-container {
  width: 100%;
  height: 300rpx;
  position: relative;

  .text-container {
    position: absolute;
    font-size: 32rpx;
    top: 60rpx;
    left: 60rpx;
    letter-spacing: 2rpx;
    color: #fff;
    width: 420rpx;
  }

  image {
    width: 100%;
    height: 300rpx;
  }
}
</style>
